<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label for="dd">用户名称：</label><br>
    <input id="dd" type="text"><br>
    <label for="da">用户密码：</label><br>
    <input id="da" type="password"><br>
    <label>
    <input name="te" type="radio" value="boy">男</label>
    <label><input name="te" type="radio" value="girl">女<hr></label>

        
    <lable><input name="dc" type="checkbox">打球<br></lable>
    <lable><input name="dc" type="checkbox">游泳<br></lable>
    <lable><input name="dc" type="checkbox">看书<br></lable><hr>

    <button type="reset">重置</button>


    
    <button type="button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="image">图片按钮</button><hr>
    <select size="1" required>
        <option value="1">会员类型</option>
        <optgroup label="A组">
        <option value="2">普通会员</option>
        <option value="3">高贵会员</option>
    </optgroup>  <optgroup label="B组">
        <option value="4">钻石会员</option>
        <option value="4">SSS会员</option>
    </optgroup>
    </select><hr>
    <textarea cols="50" rows="10" placeholder="请输入文本" maxlength="30"></textarea>

    <input type="file" accept="image/png"/>
    <input type="file" accept="image/gif,image/jepg"/>
    <input type="file" accept="image/*"/><hr>
    <input type="date" value="2000-05-20">
    <input type="time" value="09:00">
    <input type="color" value="#ff0000">
 
<hr>
<p>
    <input type="range" min="0" max="1" id="range" step="0.05" value="100">
    </p>
    <div id="box" style= "width:100px;height:10px;background-color:red ;opacity:0;"></div;>
  
    <hr>
    <input type="number" value="10" min="5" max="100" step="2" placeholder="请输入数量">
     
    <hr>



    <script>
        document.querySelector('#range').oninput=function(){
        console.log(this.value);
        document.querySelector('#box').style.opacity=this.value;
        }
        </script>

        <p>
            <input type="text" placeholder="出发城市" list="citys">
            <datalist id="citys">
                <option value="nanchang">南昌</option>
                <option value="guangzhou">广州</option>
                <option value="beijing">北京</option>

            
            </datalist>
        </p>
</form>






</body>
</html>